<template>
  <!-- 课程概况 -->
  <div style="padding: 15px">
    <!-- 概况数据展示 -->
    <div>
      <div class="overview_title flex_y_center">
        <!-- 标题 -->
        <div class="flex_y_center">
          <div class="overview_title_symbol">|</div>
          <div style="font-size: 12px; font-weight: 600">课程整体概况</div>
        </div>
        <!-- 日期选择 -->
        <div class="flex_y_center">
          <!-- 筛选条件选择器 -->
          <el-select
            v-model="type"
            style="width: 180px; margin-right: 5px"
            @change="selNaturalDay"
          >
            <el-option label="本日" value="now_day" />
            <el-option label="本周" value="week" />
            <el-option label="本月" value="now_month" />
            <el-option label="自然日" value="day" />
            <el-option label="自然月" value="month" />
          </el-select>
          <!-- 自然日日期选择器 -->
          <el-date-picker
            v-show="type == 'day'"
            v-model="at"
            format="yyyy 年 MM 月 dd 日"
            placeholder="选择日期"
            type="date"
            value-format="yyyy-MM-dd"
            @change="selDate"
          />
          <!-- 自然月日期选择器 -->
          <el-date-picker
            v-show="type == 'month'"
            v-model="startEndAt"
            align="right"
            end-placeholder="结束日期"
            range-separator="至"
            start-placeholder="开始日期"
            type="daterange"
            value-format="yyyy-MM-dd"
            @change="selDate"
          />
        </div>
      </div>
      <!-- 数据显示 -->
      <div v-if="overviewInfo.user_situation">
        <!-- 课程概况 -->
        <div class="content_items flex_y_center">
          <div>
            <h4>课程概况</h4>
          </div>
          <div>
            <div class="items_h flex_y_center">
              <div style="margin-right: 5px">消课数</div>
            </div>
            <div class="items_val">
              {{ overviewInfo.course_situation.used_nums }}
            </div>
          </div>
          <div>
            <div class="items_h flex_y_center">
              <div style="margin-right: 5px">待消课数</div>
            </div>
            <div class="items_val">
              {{ overviewInfo.course_situation.wait_nums }}
            </div>
          </div>
          <div>
            <div class="items_h flex_y_center">
              <div style="margin-right: 5px">消课完成比例</div>
            </div>
            <div class="items_val">
              {{ overviewInfo.course_situation.percent }}%
            </div>
          </div>
        </div>
        <!-- 学员概况 -->
        <div class="content_items flex_y_center">
          <div>
            <h4>学员概况</h4>
          </div>
          <div>
            <div class="items_h flex_y_center">
              <div style="margin-right: 5px">学员数</div>
            </div>
            <div class="items_val">
              {{ overviewInfo.customer_situation.nums }}
            </div>
          </div>
          <div>
            <div class="items_h flex_y_center">
              <div style="margin-right: 5px">上课次数</div>
            </div>
            <div class="items_val">
              {{ overviewInfo.customer_situation.set_nums }}
            </div>
          </div>
          <div>
            <div class="items_h flex_y_center">
              <div style="margin-right: 5px">总消课数</div>
            </div>
            <div class="items_val">
              {{ overviewInfo.customer_situation.used_nums }}
            </div>
          </div>
        </div>
        <!-- 老师概况 -->
        <div class="content_items flex_y_center">
          <div>
            <h4>老师概况</h4>
          </div>
          <div>
            <div class="items_h flex_y_center">
              <div style="margin-right: 5px">排课次数</div>
            </div>
            <div class="items_val">
              {{ overviewInfo.user_situation.set_nums }}
            </div>
          </div>
          <div>
            <div class="items_h flex_y_center">
              <div style="margin-right: 5px">上课次数</div>
            </div>
            <div class="items_val">
              {{ overviewInfo.user_situation.used_nums }}
            </div>
          </div>
          <div>
            <div class="items_h flex_y_center">
              <div style="margin-right: 5px">完成率</div>
            </div>
            <div class="items_val">
              {{ overviewInfo.user_situation.percent }}%
            </div>
          </div>
        </div>
      </div>
      <div v-else v-loading="dataLoad" class="overview_content"></div>
    </div>
  </div>
</template>

<script>
  import { courseSituation } from '@/api/overviews'

  export default {
    data() {
      return {
        type: 'now_day',
        at: '', // 存放用户选择自然日日期
        startEndAt: [], // 存放用户选择的自然月开始结束日期

        overviewInfo: {}, // 存放概况信息

        dataLoad: false, // 加载样式显示隐藏
      }
    },
    mounted() {
      this.getOverviewData()
    },
    methods: {
      // 获取课程概况数据
      getOverviewData(nature) {
        this.overviewInfo = {}
        this.dataLoad = true

        const params = {
          type: this.type,
          date: Array.isArray(nature) ? nature[0] : nature,
        }
        courseSituation(params).then((res) => {
          this.overviewInfo = res.data
          this.dataLoad = false
        })
      },
      // 选择条件
      selNaturalDay() {
        this.at = ''
        this.startEndAt = ''
        if (this.type != 'day' && this.type != 'month') this.getOverviewData()
      },
      selDate() {
        this.getOverviewData(this.at || this.startEndAt)
      },
    },
  }
</script>

<style scoped>
  .overview_title {
    justify-content: space-between;
    padding: 10px 10px 10px 0;
    background-color: rgb(247, 248, 250);
  }
  .overview_title_symbol {
    width: 20px;
    font-weight: 700;
    text-align: center;
    color: rgb(14, 85, 210);
  }
  .overview_content {
    height: 200px;
  }
  .content_items {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 18px 0 18px 20px;
  }
  .content_items > div {
    flex: 1;
  }
  .content_items div .items_h {
    font-size: 12px;
    font-weight: 600;
  }
  .content_items div .items_val {
    font-size: 18px;
    font-weight: 600;
    margin-top: 5px;
  }
</style>
